<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>select</title>
		<link href="../select3.css" rel="stylesheet" />
	</head>

	<body>
		<form action="/">
			<!--表单包裹层-->
			<div style="width: 250px; display: inline-block;">
				<div class="select3-ui" id="xxx">
					<div class="select3-selected-bar">
						<ul class="select3-selected-items" id="xxx__selected-items">
							<li class="select3-selected-item" data-value="1" data-text="结果1">
								<span>选择1</span>
								<i class="select3-selected-icon select3--icon select3--icon-close"></i>
							</li>
							<li class="select3-selected-item" data-value="1" data-text="结果1">
								<span>选择2</span>
								<i class="select3-selected-icon select3-icon select3-icon-close"></i>
							</li>
						</ul>
						<span class="select3-refresh-btn select3-icon select3-icon-refresh" id="xxx__refresh-btn"></span>
						<div style="display: none;">
							<input name="address" type="hidden" value="1"/>
							<input name="address" type="hidden" value="2"/>
						</div>
					</div>
						
				</div>
			</div>
		</form>
	</body>
	<div class="select3-dropdown-items" id="xxx__dropdown_items" style="width: calc(250px - 2px);">
		<div class="select3-search-bar">
			<input class="select3-search-input" id="xxx__select-input" placeholder="请输入过滤关键词">
			<span class="select3-search-btn select3-icon select3-icon-search" id="xxx__search-btn"></span>
		</div>
		<div class="select3-items-box" id="xxx__items-box">
			<ul class="select3-tree" style="">
				<li class="select3-option" data-value="023" data-text="重庆市">
					<i class="select3-item-icon select3-icon "></i>
					<span class="select3-item">重庆市</span>
				</li>
				<li class="select3-option" data-value="010" data-text="北京市">
					<i class="select3-item-icon select3-icon "></i>
					<span class="select3-item">北京市</span>
				</li>
				<li class="select3-option" data-value="028" data-text="四川">
					<i class="select3-item-icon select3-icon "></i>
					<span class="select3-item">四川</span>
					<i class="select3-unfold-icon select3-icon select3-icon-enter"></i>
					<ul class="select3-tree" style="padding-left: 16px;">
						<li class="select3-option" data-parent="028" data-value="03001" data-text="成都市">
							<i class="select3-item-icon select3-icon "></i>
							<span class="select3-item">成都市</span>
						</li>
						<li class="select3-option" data-parent="028" data-value="03002" data-text="宜宾市">
							<i class="select3-item-icon select3-icon "></i>
							<span class="select3-item">宜宾市</span>
							<i class="select3-unfold-icon select3-icon select3-icon-enter"></i>
							<ul class="select3-tree" style="padding-left: 16px;">
								<li class="select3-option" data-parent="03002" data-value="0300201" data-text="翠屏区">
									<i class="select3-item-icon select3-icon "></i>
									<span class="select3-item">翠屏区</span>
								</li>
							</ul>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!--分页区-->
		<div class="select3-pagination" id="xxx__pagination">
			<i class="select3-pagination-button select3-icon select3-icon-skip-previous"></i>
			<i class="select3-pagination-button select3-icon select3-icon-chevron-left"></i>
			<span class="select3-pagination-text" id="xxx__pageNo">1</span><span class="select3-pagination-text">/</span><span class="select3-pagination-text"  id="xxx__total">20</span>
			<i class="select3-pagination-button select3-icon select3-icon-chevron-right"></i>
			<i class="select3-pagination-button select3-icon select3-icon-skip-next"></i>
		</div>
		<!--信息提示区-->
		<div class="select3-remind-box" id="xxx__select-remind-box" style="display: none;">
			无匹配的选项！
		</div>
	</div>
	<!-- jQuery -->
	<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	<script>
		var data = {
			nodes :[{
					"text": "重庆市",
					"value": '023',
					"selected": false,
					"nodes": null
				}, {
					"text": "北京市",
					"value": "02002",
					"selected": false,
					"nodes": null
				}, {
					"text": "四川",
					"value": "028",
					"selected": false,
					"nodes": [
						{
							"text": "成都市",
							"value": "03001",
							"selected": false,
							"nodes": null
						},
						{
							"text": "宜宾市",
							"value": "03002",
							"selected": false,
							"nodes": [
								{
									"text": "翠屏区",
									"value": "0300201",
									"selected": false,
									"nodes": null
								}
							]
						}
					]
				}]
			};
//			var mode = 'local';
			var mode = 'remote';
			var duplicate = true;
			var self = $("#xxx");
			/**
			 * 设置数据源
			 * @param {Object} data 数据
			 */
			function setDataSource(data){
				if(typeof(data) == 'string') {
					data = JSON.parse(data);
				}
				console.log('=============');
				cleanOptions();
				if(data.nodes && data.nodes.length > 0){
					var dom = renderUI(data);
					dom.appendTo($("#xxx__items-box"));
					var ops = doOptions(data.nodes, null);
					self.data("dataSource", data);
					self.data("options", JSON.stringify(ops));
				}else{
					self.data("dataSource", data);
					self.data("options", JSON.stringify([]));
				}
				bindEvent();
			}
			
			function doOptions(nodes, options) {
				if(!options) {
					options = [];
				}
				for(var index in nodes) {
					var node = nodes[index];
					var option = {};
					option['value'] = node.value;
					option['text'] = node.text;
					options.push(option);
					if(node.nodes) {
						this.doOptions(node.nodes, options);
					}
				}
				return options;
			}
			
			function bindEvent(){
				var _this = this;
				self.find(".select3-item").click(function() {
					var selectItem = $(this).parent("li");
				});
				$("#xxx__items-box").find(".select3-tree li>.select3-unfold-icon").click(function(e) {
					e.stopPropagation(); //阻止事件冒泡  
					var selectItem = $(this).parent("li");
					if(selectItem.hasClass("select3-tree-unfold")) {
						selectItem.removeClass("select3-tree-unfold");
						selectItem.find(">ul").hide();
					} else {
						selectItem.addClass("select3-tree-unfold");
						selectItem.find(">ul").show();
					}
				});
				$("#xxx__items-box").find(".select3-item").click(function(e) {
					e.stopPropagation(); //阻止事件冒泡
					var node = $(this).parent("li");
					if(duplicate){
						_this.select(node.data('value'), node.data('text'));
					}else{
						var selecteds = _this.getSelectedValue();
						if($.inArray(node.data('value'), selecteds) == -1){
							_this.select(node.data('value'), node.data('text'));
						}else{
							funcShowMessage('不支持重复选择！');
						}
					}

				});
			}
			/**
			 * 渲染界面
			 * @param {Object} data
			 */
			function renderUI(data){
				//JSON数据存在nodes节点，且存在至少一个结果进行渲染
				return renderNodes(data.nodes, 0)
			}
			/**
			 * 渲染上级节点
			 * @param {Object} nodes
			 * @param {Object} deep
			 */
			function renderNodes(nodes, deep){
				var root = $('<ul class="select3-tree" style="' + (deep != 0 ? 'padding-left: 16px;display: none;' : '') + '"></ul>');
				for(var index in nodes) {
					var node = nodes[index];
					var element = renderNode(node);
					//存在子节点
					if(node.nodes) {
						element.append('<i class="select3-unfold-icon select3-icon select3-icon-enter"></i>');
						var tree = renderNodes(node.nodes, ++deep);
						tree.appendTo(element);
					}
					element.appendTo(root);
				}
				return root;
			}
			/**
			 * 渲染节点
			 * @param {Object} node 节点数据
			 */
			function renderNode(node){
				var icon = node.icon ? node.icon : '';
				var value = node.value;
				var text = node.text;
				var selected = node.selected;
				var element = $('<li class="select3-option" data-icon="' + icon + '" data-value="' + value + '" data-text="' + text + '"><i class="select3-item-icon select3-icon ' + icon + '"></i><span  class="select3-item">' + text + '</span></li>');
				return element;
			}
			/**
			 * 清空备选选项
			 */
			function cleanOptions(){
				$("#xxx__items-box").empty();
				self.data("dataSource", '{}');
			}
			/**
			 * 本地搜索
			 * @param {Object} keyword
			 */
			function localSearch(keyword){
				var matchCount = 0;
				$("#xxx__items-box").find(".select3-option").each(function(index, ele){
					var option = $(ele);
					var item = option.find(".select3-item");
					var text = option.data('text');
					var value = option.data('value');
					var pos = text.indexOf(keyword);
					//如果关键词没有，则全部恢复
					if(!keyword || keyword.length == 0){
						item.html(text);
						option.show();
						matchCount++;
						return;
					}
					if(pos>-1){
						item.html(text.slice(0,pos)
							+ '<span class="select3-search-result">'
							+ keyword
							+ '</span>'
							+ text.slice(pos + keyword.length)
						);

						option.show();
						option.parents(".select3-option").show();
						matchCount++;
					}else{
						option.hide();
					}
				});
				//没有匹配的结果，显示提示信息
				if(matchCount == 0){
					showMessage('无匹配的选项！');
				}else{
					var remindBox = $("#xxx__select-remind-box");
					remindBox.html('');
					remindBox.hide();
				}
			};
			
			function remoteSearch(keyword){
				//TODO 发送获取远程数据源
				setDataSource(data);
			}
			$("#xxx__select3-input").keyup(function(e){
				e.stopPropagation(); //阻止事件冒泡
				var target = $(e.target);
				var keyword = target.val();
				if(mode == 'local'){
					localSearch(keyword);	
				}else{
					remoteSearch(keyword);
				}
			});
			
			$("#xxx__search-btn").click(function(e){
				var keyword = $("#xxx__select-input").val();
				if(mode == 'local'){
					localSearch(keyword);	
				}else{
					remoteSearch(keyword);
				}
			});
			$("#xxx__refresh-btn").click(function(e){
				e.stopPropagation(); //阻止事件冒泡
				$("#xxx__dropdown_items").hide();
				var remindBox = $("#xxx__select-remind-box");
				remindBox.html('');
				remindBox.hide();
				if(mode == 'local'){
					setDataSource(data);
				}else{
					setDataSource({});
				}
			});
			
			$("#xxx").find(".select3-selected-bar").click(function(e){
				e.stopPropagation(); //阻止事件冒泡  
				$("#xxx__dropdown_items").toggle();
				var remindBox = $("#xxx__select-remind-box");
				remindBox.html('');
				remindBox.hide();
			});
			
			function showMessage(message){
				var remindBox = $("#xxx__select-remind-box");
				remindBox.html(message);
				remindBox.show();
			};
			
			function select(value, text){
				$('<li class="select3-selected-item" data-value="' + value + '" data-text="' + text + '"><span>' + text + '</span><i class="select3-selected-icon select3-icon select3-icon-close"></i></li>').appendTo($("#xxx").find(".selected-items"));
				//注册选中项单击的事件
				$("#xxx__selected-items").on("click", ".select3-selected-icon", function(e) {
					e.stopPropagation(); //阻止事件冒泡
					$(this).parent(".select3-selected-item").remove();
				});
			};
			bindEvent();
	</script>
</html>